<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
	xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<meta charset="UTF-8">
<title>主页</title>
<link rel="stylesheet" type="text/css"
	href="/bootstrap/bootstrap.4.1.0.css">
<script src="/bootstrap/jquery.3.2.1.min.js"></script>
<script src="/bootstrap/popper.12.5.min.js"></script>
<script src="/bootstrap/bootstrap.4.1.0.min.js"></script>
<script src="/layui/layer/layer.js"></script>
<script src="/vue/Vue.js"></script>
<script src="/vue/axios.js"></script>
<style>
.btn {
	margin-right: 50px;
}
</style>
<script type="text/javascript">
	$(function(){
		$("#header").load("header.html");
	})
</script>
</head>
<body class="bg-light">
	<div id="header"></div>
	<div id="all" class="container-fluid">
		<div class=" text-center">

			<div id="demo" class="carousel slide" data-ride="carousel">

				<!-- 指示符 -->
				<ul class="carousel-indicators">
					<li data-target="#demo" data-slide-to="0" class="active"></li>
					<li data-target="#demo" data-slide-to="1"></li>
					<li data-target="#demo" data-slide-to="2"></li>
				</ul>

				<!-- 轮播图片 -->
				<div class="carousel-inner">
					<div class="carousel-item active">
						<img
							src="/img/gym04.jpg"
							style="top: 0px; left: 0px; width:100%">
					</div>
					<div class="carousel-item">
						<img
							src="/img/gym05.jpg"
							style="top: 0px; left: 0px; width:100%">
					</div>
					<div class="carousel-item">
						<img
							src="/img/gym06.jpg"
							style="top: 0px; left: 0px; width:100%">
					</div>
				</div>

				<!-- 左右切换按钮 -->
				<a class="carousel-control-prev" href="#demo" data-slide="prev">
					<span class="carousel-control-prev-icon"></span>
				</a> <a class="carousel-control-next" href="#demo" data-slide="next">
					<span class="carousel-control-next-icon"></span>
				</a>

			</div>

		</div>
		<br>
		<div class="btn-group btn-group-lg right">


			<div v-if="role!='1'">
				<button class="btn btn-outline-primary" @click="toView(1)">查看学员</button>
			</div>
			<div v-if="role!='2'">
				<button class="btn btn-outline-primary" @click="toView(2)">查看教练</button>
			</div>
			<div v-if="role!='3'">
				<button href="#" class="btn btn-outline-primary" @click="toView(3)">查看场馆</button>
			</div>
			<br>
			<br>
		</div>

		<div>
			<div v-if="role!='1'">
				<h3>附近学员:</h3>
				<div class="row">
					<!-- v-for="student in students" -->
					<div class="col-md-5 col-sm-6" v-for="stu in students">
						<div class="card">
							<div class="card-body">
								<h4 class="card-title">{{stu.nickname}}</h4>
								<p class="card-text">{{stu.description}}</p>
								<p class="card-text">
									距您<b>{{stu.distance}}</b>公里
								</p>
								<a @click="moreStu(stu.id)" class="card-link"
									href="JavaScript:;">学员详情</a>
							</div>
						</div>
					</div>
				</div>
				<a href="#" class="card-link" @click="toView(1)">查看更多学员...</a>
			</div>
			<div v-if="role!='2'">
				<h3>附近教练:</h3>
				<div class="row">
					<div class="col-md-5 col-sm-6" v-for="coach in coachs">
						<div class="card">
							<div class="card-body">
								<h4 class="card-title">{{coach.nickname}}</h4>
								<p class="card-text">{{coach.description}}</p>
								<p class="card-text">距您<b>{{coach.distance}}</b>公里</p>
								<a href="JavaScript:;" class="card-link"
									@click="moreCoach(coach.id)">教练详情</a>
							</div>
						</div>
					</div>
				</div>
				<a href="#" class="card-link" @click="toView(2)">查看更多教练...</a>
			</div>
			<div v-if="role!='3'">
				<h3>附近场馆:</h3>
				<div class="row">
					<!-- 					v-for="gym in gyms" -->
					<div class="col-md-5 col-sm-6" v-for="gym in gyms">
						<div class="card">
							<div class="card-body">
								<h4 class="card-title">{{gym.nickname}}</h4>
								<p class="card-text">{{gym.description}}</p>
								<p class="card-text">
									距您<b>{{gym.distance}}</b>公里
								</p>
								<a href="JavaScript:;" @click="moreGym(gym.id)"
									class="card-link">场馆详情</a>
							</div>
						</div>
					</div>
				</div>
				<a href="#" class="card-link" @click="toView(3)">查看更多场馆...</a>
			</div>
		</div>
	</div>
	<script type="text/javascript">
	new Vue({
		el:"#all",
		data:{
			students:[],
			coachs:[],
			gyms:[],
			role:"",
		},
		mounted(){
			axios.get("/coach/getNowUser").then(
					res => {
						this.role = res.data.data.role;
						console.log(this.role);
					}	
			);
			axios.get("/user/nearUser")
				.then(
					res => {
						if(res.data.code==1){
							let gyms = res.data.data.gym;
							let students = res.data.data.student;
							let coachs = res.data.data.coach;
							this.students = students;
							this.gyms = gyms;
							this.coachs = coachs;
							console.log("coachs:"+this.coachs);
						}
					}
			);
		},
		methods:{
			moreStu:function(id){
				location.href="/lsw/student_view.html?id="+id;
			},
			moreCoach:function(id){
				location.href="/lsw/coach_view.html?id="+id;
			},
			moreGym:function(id){
				location.href="/lsw/gym_view.html?id="+id;
			},
			toView:function(target){
				location.href = "/xingqilin/nearby.html?role="+this.role+"&target="+target;
			}
		}

	})
</script>
</body>

</html>